<template>
  <div class="user_login" :style="{ height: evieHeight}">
    <div class="user_text">
      你好,
      <br>
      请选择角色
    </div>
    <div class="banaer">
      <div class="imgbox">
        <div class="userImg" @click="checkUserImg">
          <img class="imgs" :src="user" v-if="userCheck" alt="">
          <img :src="noCheckU" v-if="!userCheck" alt="">
          <p class="titles">普通用户</p>
        </div>
      </div>
      <div class="imgbox">
        <div class="userOper" @click="checkOperImg">
          <img class="imgs" :src="operation" v-if="operCheck" alt="">
          <img class="imgs" :src="noCheckOp" v-if="!operCheck" alt="">
          <p class="titles">运维人员</p>
        </div>
      </div>


    </div>
    <div @click="tu_login" class="tu_login">确定</div>
  </div>
</template>

<script>
  import shiJ from "../../components/shiJ.vue";
  export default {
    data() {
      return {
        evieHeight: "",
        a: 0,
        user: "/static/img/login/user_l1.png",
        operation: "/static/img/login/yunw_l1.png",
        noCheckU: "/static/img/login/user_l0.png",
        noCheckOp: "/static/img/login/yunw_l0.png",
        operCheck: false,
        userCheck: false,
      };
    },

    components: {},
    mounted() {
      this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
    },
    methods: {
      checkOperImg() {
        this.userCheck = false;
        this.operCheck = !this.operCheck;
        this.updataSta();
      },
      checkUserImg() {
        this.operCheck = false;
        this.userCheck = !this.userCheck;
        this.updataSta();
      },
      updataSta() { //点击选择角色保存角色值
        if (this.operCheck) {
          this.a = 2;
        } else if (this.userCheck) {
          this.a = 1;
        } else {
          this.a = 0;
        }
      },
      tu_login() {
        if (this.a == 0) {
          wx.showToast({
            title: "请选择登录角色",
            icon: "none"
          });
        } else {
          wx.setStorage({
            key: "role",
            data: this.a
          });
          wx.navigateTo({
            url: "../../pages/UserLogin/main"
          });
        }
      }
    },
    created() {}
  };
</script>

<style scoped>
  .user_login {
    width: 750rpx;
    overflow: hidden;
    background-color: white;
  }

  .user_text {
    font-size: 48rpx;
    font-weight: bold;
    line-height: 80rpx;
    margin-left: 80rpx;
    margin-top: 100rpx;
  }

  .banaer {
    width: 750rpx;
    height: 182rpx;
    margin-top: 100rpx;
    display: flex;
  }

  .banaer img {
    float: left;
    height: 182rpx;
    width: 172rpx;
    margin-bottom: 42rpx;
  }

  .tu_login {
    width: 562rpx;
    height: 80rpx;
    background-color: #20c9e1;
    color: white;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    font-weight: Regular;
    margin-top: 130rpx;
    margin-left: 94rpx;
  }

  .imgbox {
    width: 50%;
    height: 200rpx;
    text-align: center;
    position: relative;
  }

  .userImg,
  .userOper {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 186rpx;
    height: 100%;
    position: absolute;
  }

  .titles {
    height: 58rpx;
    font-size: 30rpx;
    color: #333333;
    text-align: center;
    font-weight: 600;
  }

  .imgs {
    width: 100%;
    height: 100%;
  }
</style>
